HTMLify
index.html
Views: 12 | Author: cody
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css" />
<link rel="stylesheet" href="style.css" />
<title>GSAP Toggle View Animation</title>
</head>
<body>
<div class="img-gallery-wrapper" data-scroll-wrapper>
<div class="img-gallery-ctr" data-scroll-ctr>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1682685795463-0674c065f315?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1683265309801-7e1f2f1a4b5a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1619087940820-d3fcb8a26b56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1599669846660-945c5c775181?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1682687220015-186f63b8850a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1075&q=80" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://media.cnn.com/api/v1/images/stellar/prod/201221102826-airpods-max.jpg?q=x_2,y_0,h_1130,w_2008,c_crop/h_540,w_960/f_webp" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.pexels.com/photos/3721098/pexels-photo-3721098.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.pexels.com/photos/2983327/pexels-photo-2983327.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1501707549080-f3aba9d978b8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="Cover" />
</div>
</div>
</div>
<button class="btn">Flip Layout</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/CustomEase.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
<script src="app.js"></script>
</body>
</html>